<template>
  <!-- 预览office附件页面 -->
  <div class="iframeView">
    <embed
      v-if="pdfUrl!==''"
      :height="winH"
      :src="pdfUrl"
      style="position:absolute; left: 0; top: 0;background-color: #FFFFFF;"
      width="100%"
      type="application/pdf"
    />
    <div v-if="pdfUrl===''">
      <div class="iframeSheetBox">
        <el-button
          type="pramary"
          size="mini"
          v-for="(item, index) in sheetList"
          :class="{iframeActive:nowItem===index}"
          :key="index"
          @click="changeSheet(index)"
        >{{ item }}</el-button>
      </div>
      <div :height="winH" class="tableBox" v-html="infox" />
    </div>
  </div>
</template>
<script>
import { mapGetters } from 'vuex'
import xlsx from 'xlsx'
export default {
  name: 'IframeView',
  data () {
    return {
      pdfUrl: '',
      winH: 0,
      infox: '',
      sheetList: [],
      excelInfo: [],
      nowItem: 0
    }
  },
  computed: {
    ...mapGetters([
      'userInfo'
    ])
  },
  created () {
    this.winH = window.innerHeight || document.body.clientHeight
    // Watermark.set(this.userInfo.userName)
  },
  mounted () {
    window.eventEmitter.$on('iframeViewEvent', (data) => {
      if (data.pdfFlag) {
        this.pdfUrl = window.CONFIG.fileServer + '/get?filename=' + data.pdfLink
      } else {
        if (data.pdfLink) {
          this.pdfUrl = data.pdfLink
        } else {
          const workbook = JSON.parse(data.workbook)
          this.getExcel(workbook)
        }
      }
    })
    if (this.$route.query.pdfFlag) {
      this.pdfUrl = window.CONFIG.fileServer + '/get?filename=' + this.$route.query.pdfLink
    } else {
      if (this.$route.query.pdfLink) {
        this.pdfUrl = this.$route.query.pdfLink
      } else {
        const workbook = JSON.parse(this.$route.query.workbook)
        this.getExcel(workbook)
      }
    }
  },
  deactivated () {
    // 清除水印
    // Watermark.out()
  },
  methods: {
    changeSheet (index) {
      this.infox = this.excelInfo[index]
      this.nowItem = index
    },
    getExcel (workbook) {
      const that = this
      that.sheetList = workbook.SheetNames

      // 以二进制流方式读取得到整份excel表格对象
      let persons = [] // 存储获取到的数据

      // 表格的表格范围，可用于判断表头是否数量是否正确
      var fromTo = ''
      // 遍历每张表读取
      for (var sheet in workbook.Sheets) {
        if (workbook.Sheets.hasOwnProperty(sheet)) {
          fromTo = workbook.Sheets[sheet]['!ref']
          console.log(fromTo)
          if (fromTo) {
            persons = persons.concat(
              xlsx.utils.sheet_to_html(workbook.Sheets[sheet])
            )
          }
          // break;
          // 如果只取第一张表，就取消注释这行
        }
      }
      that.excelInfo = persons
      that.infox = persons[0]
    }
  }
}
</script>
<style lang="scss" scoped>
.iframeView {
  position: relative;
  height: 100%;
  overflow: auto;
  background: rgb(255, 255, 255);
}
.tableBox {
  /deep/ table {
    min-width: 1000px;
    margin: 0 auto;
    margin-top: 10px;
    border-left: 1px solid rgb(194, 194, 194);
    border-top: 1px solid rgb(194, 194, 194);
    border-collapse: collapse;
    border-spacing: 0;
  }
  /deep/ td {
    background: #fff;
    border-right: 1px solid rgb(194, 194, 194);
    border-bottom: 1px solid rgb(194, 194, 194);
    padding: 5px !important;
  }
}

.iframeSheetBox {
  text-align: left;
  //position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 60px;
  z-index: 9;
  background: rgb(255, 255, 255);
  padding-left: 10px;
  el-button {
    background: rgb(255, 255, 255);
    color: #000;
    padding: 4px 10px;
    margin-top: 11px;
    margin-right: 5px;
    display: inline-block;
  }
}

.iframeActive {
  color: #fff !important;
  background: #3167af !important;
}
</style>
